<script>
import { FILTER_TYPE_DATE_PICK, FILTER_TYPE_SELECT } from './Constant'
export default {
  name: 'Index2',
  props: {
    filterConfig: {
      type: Object,
      required: true
    },
    value: {
      type: Object,
      required: true
    }
  },
  computed: {
    formName() {
      return this.filterConfig.formName || 'filterForm'
    }
  },
  methods: {
    resetForm() {
      this.$refs[this.formName].resetFields()
    }
  },
  render(createElement, context) {
    const { formName, buttons, filterItems, rules } = this.filterConfig || {}
    const butEle = buttons.map(btnItem => {
      return <el-button size='small' type={btnItem.type} onClick={btnItem.onClick}>{ btnItem.name }</el-button>
    })
    // todo v-model 怎么办
    // v-model支持： babel-plugin-jsx-v-model
    const colEleList = filterItems.map(filterItem => {
      let elItem = null
      switch (filterItem.type) {
        case FILTER_TYPE_DATE_PICK:
          elItem = <el-date-picker
            v-model={this.value[filterItem.prop]}
            type='date'
            placeholder={filterItem.placeholder}
            value-format={filterItem.format}
            format={filterItem.format}
          />
          break
        case FILTER_TYPE_SELECT:
          elItem = (<el-select
            v-model={this.value[filterItem.prop]}
            placeholder={filterItem.placeholder}
            clearable={filterItem.clearable}
          >
            {
              filterItem.options && filterItem.options.map(optionItem =>
                <el-option
                  key={optionItem.value}
                  value={optionItem.value}
                  label={optionItem.label}
                />)
            }
          </el-select>)
          break
        default:
          elItem = <el-input v-model={this.value[filterItem.prop]} placeholder={filterItem.placeholder} />
          break
      }
      return (
        <el-col span={filterItem.colSpan || 8}>
          <el-form-item label={filterItem.label} prop={filterItem.prop}>
            { elItem }
          </el-form-item>
        </el-col>
      )
    })
    // el-form model通过props传入
    return (
      <div class='content-body'>
        <div class='form-wrap'>
          <el-form
            ref={formName}
            size='small'
            props={{ model: this.value, rules: rules || {}}}
            label-width='100px'
          >
            <el-row>
              { colEleList }
            </el-row>
          </el-form>
        </div>
        <div class='btn-wrap'>
          { butEle }
        </div>
      </div>
    )
  }
}
</script>

<style lang="scss" scoped>
.content-body {
  background: #fff;
  padding: 10px;

  .btn-wrap {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

}
</style>
